<template>
	<view class="ys">
		<view class="form">
			<uni-section title="房间订单" type="line">
				<view class="inputbox">
					<uni-data-select v-model="order_id" :localdata="orderRange"></uni-data-select>
				</view>
			</uni-section>
			<uni-section title="详情内容" type="line">
				<view class="inputbox">
					<uni-easyinput type="textarea" v-model="content" trim placeholder="详情内容"
						clearSize="20"></uni-easyinput>
				</view>
			</uni-section>
			<uni-section title="上传图片" type="line">
				<view class="imgbox">
					<view class="imglist" v-for="(item,index) in list" :key="index">
						<image :src="item.path" mode=""></image>
						<uni-icons class="icons" type="closeempty" @click="delImg(index)" size="22"
							color="#f00"></uni-icons>
					</view>
					<image src="/static/index/add.png" @click="uploadImg" mode=""></image>
				</view>
			</uni-section>
		</view>
		<button class="btn" @click="subMaterial" :loading="loading" :disabled="loading">提交</button>
	</view>
</template>

<script>
	import {
		staffMaterialOrder,
		subMaterial
	} from "@/api/staff.js"
	export default {
		data() {
			return {
				order_id: '',
				orderRange: [],
				orderList: [],
				content: '',
				loading: false,
				staffRange: [],
				staff_id: '',
				list: []
			}
		},
		onLoad() {
			this.staffMaterialOrder()
		},
		methods: {
			staffMaterialOrder() {
				staffMaterialOrder().then(res => {
					if (res.code == 0) {
						this.orderList = res.data
						this.orderList.forEach((item, index) => {
							this.orderRange.push({
								value: item.id,
								text: `房间：【${item.room.name}】, ${item.finish_time?'完成'+item.finish_time:'未完成'}`
							})
						})
					}
				})
			},
			changeOrder(e) {
				let i = this.orderList.findIndex(item => item.id == e)
				if (i > -1) {
					this.staffRange = []
					let staff = this.orderList[i].staff
					staff.forEach((item, index) => {
						this.staffRange.push({
							value: item.staff_id,
							text: `姓名【${item.staff.name}】, ${item.staff.phone}`
						})
					})
				}
			},
			uploadImg() {
				var that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/common/upload',
								header: {
									'tokens': uni.getStorageSync('tokens')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'UploadFile',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 0) {
										let imgData = imgRes.data
										that.list.push(imgData)
									} else {
										uni.$showMsg(imgRes.msg)
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			delImg(i) {
				this.list.splice(i, 1)
			},
			subMaterial() {
				let that = this
				let file_ids = []
				this.list.forEach(item => {
					file_ids.push(item.id)
				})
				if (this.order_id == '') {
					return uni.$showMsg('请选择房间订单')
				}
				if (this.content == '') {
					return uni.$showMsg('请输入客资内容')
				}
				if (this.file_ids == '') {
					return uni.$showMsg('请上传图片')
				}
				that.loading = true
				subMaterial({
					order_id: this.order_id,
					content: this.content,
					file_ids
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						that.loading = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.ys {
		.inputbox {
			width: 96%;
			margin: 0px auto;
		}

		.form {
			padding-bottom: 15px;
			background: #fff;
		}

		.btn {
			button {
				color: #fff;
				font-size: 16px;
				letter-spacing: 1px;
				margin: 30px auto;
				width: 96%;
			}
		}
	}

	.imgbox {
		margin: 10px 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 10px;

		image {
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}

		.imglist {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			position: relative;

			.icons {
				position: absolute;
				top: 0;
				right: 10px;
				background: #ffffff80;
				border-bottom-left-radius: 5px;
			}
		}
	}
</style>